<template>
    <el-submenu v-if="menu.children && menu.children.length >= 1" :index="menu.menu_id + ''">
        <template slot="title">
            <i :class="menu.icon"></i>
            <span slot="title">{{menu.menu_name}}</span>
        </template>
        <MenuTree v-for="item in menu.children" :key="item.menu_id" :menu="item"></MenuTree>
    </el-submenu>
    <el-menu-item v-else :index="menu.menu_id + ''" @click="handleRoute(menu)">
        <i :class="menu.icon"></i>
        <span slot="title">{{menu.menu_name}}</span>
    </el-menu-item>
</template>

<script>
    export default {
        name: "MenuTree",
        props: {
            menu: {
                type: Object,
                required: true
            }
        },
        methods: {
            /**
             * 对路由进行处理，修复同一路由多次点击报错问题
             * @param menu
             */
            handleRoute(menu) {
                if (this.$route.fullPath === menu.url || this.$route.redirectedFrom === menu.url || menu.subUrl === this.$route.fullPath) {
                    console.log("匹配当前路径，请勿多次点击!");
                    return;
                }
                this.$router.push(menu.url)
            }
        }
    }
</script>

<style>
    .el-menu {
        border: none;
    }
</style>